<template>
    <h2 style="text-algin:center;">会员等级列表展示</h2>
    等级名称：<input type="text" placeholder="请输入等级名称" v-model="name"/>
    等级状态：<select v-model="xia">
        <option :value="0">--请选择--</option>
        <option :value="1">启用</option>
        <option :value="2">禁用</option>
    </select>
    <input type="button" value="查询" class="btn btn-success" @click="Load"/>
    <table border="1"  class="table table-success table-striped-columns">
        <thead>
            <tr>
                <td>会员等级编号</td>
                <td>会员等级名称</td>
                <td>会员等级 状态</td>
                <td>最小成长值</td>
                <td>最大成长值</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody>
             <tr v-for="item in rank">
                <td>{{item.Rank_Id}}</td>
                <td>{{item.Rank_Name}}</td>
                <td>{{item.Rank_State==true?"启用":"禁用"}}</td>
                <td>{{item.Rank_MinPoint}}</td>
                <td>{{item.Rank_MaxPoint}}</td>
                <td>
                    <input value="删除" type="button" class="btn btn-success" style="margin-right:20px" @click="DelRank(item.Rank_Id)"/>
                    <input value="修改" type="button" class="btn btn-success" style="margin-right:20px" @click="EditRank(item.Rank_Id)"/>
                </td>
            </tr>
        </tbody>
    </table>
    <!-- 分页 -->
    <span>

        当前共{{pageInfo.totalCount}}条数据
        每页显示{{pageInfo.pageSize}}条数据
        当前第{{pageInfo.pageIndex/pageInfo.pageCount}}页
        
        <a href="#" @click="PageLoadInfo('F')" style="margin-right:20px;">首页</a>
        <a href="#" @click="PageLoadInfo('S')" style="margin-right:20px">上一页</a>
        <a href="#" @click="PageLoadInfo('X')" style="margin-right:20px">下一页</a>
        <a href="#" @click="PageLoadInfo('E')" style="margin-right:20px;">尾页</a>
        
        <select v-model="newSize" @change="ChangeSize">
            <option :value="1">1条/页</option>
            <option :value="2">2条/页</option>
            <option :value="3">3条/页</option>
            <option :value="4">4条/页</option>
        </select>

        <input type="text" style="width:40px;" v-model="Tumber"/>
        <input type="button" value="跳转" @click="Tiao"/>
    </span>
</template>
<script setup lang="ts">

    import {ref,onMounted} from 'vue';
    import axios from 'axios';

    import  {useRouter} from 'vue-router';

    const Tumber=ref("");

    //跳转页
    const Tiao=()=>{
        var nIndex=Tumber.value;
        alert(nIndex);
        //是否为空
        if(nIndex==""){
            alert('跳转页码不能为空');
            return;
        }

        //是否为数字
        if(isNaN(Number(nIndex))){
            alert('跳转页码必须为数字');
            Tumber.value="";
            return;
        }

        //起始页码大于1
        if(Number(nIndex)<1){
            alert('跳转页码必须大于等于1');
            Tumber.value="";
            return;
        }

        //不能超过最大页码
        if(Number(nIndex)>pageInfo.value.pageCount){
            alert('跳转页码必须小于总页码');
            Tumber.value="";
            return;
        }
        pageInfo.value.pageIndex=Number(nIndex);
        Load();
    }

    //分页的响应数据
    const pageInfo=ref({
        pageIndex:1,
        pageSize:2,
        totalCount:0,
        pageCount:0
    })

    //创建路由对象的实力 
    const router=useRouter();

    const newSize=ref(2);

    const rank=ref([{
    Rank_Id:0,
    Rank_Name:"",
    Rank_State:true,
    Rank_MaxPoint:0,
    Rank_MinPoint:0
    }]);

    //钩子
    onMounted(()=>{
        Load();
    })

    const name=ref("");
    const xia=ref(0);


    //显示 查询 分页
    const Load=()=>{
        axios.get("https://localhost:7153/api/Member/ShowMamberRank/ShowMamberRank",{
            params:{
                MRname:name.value,
                MRstateId:xia.value,
                pageIndex:pageInfo.value.pageIndex,
                pageSize:pageInfo.value.pageSize
            }
        }
        )
        .then(res=>{
            console.log(res.data);
            rank.value=res.data.Data_Info;
            //接收从后台返回的数据总数、总页数数据
            pageInfo.value.pageCount=res.data.PageCount;
            pageInfo.value.totalCount=res.data.TotalCount;
        })
        .catch(err=>{
            console.log(err);
        })
    }
    //删除
    const DelRank=(Rid:number)=>{
        if(confirm("确定要删除吗？")){
            axios.get("https://localhost:7153/api/Member/DeleteMemberRank/DeleteMemberRank",
            {
                params:{
                    MRid:Rid
                }
            })
            .then(res=>{
                if(res.data>0){
                    alert('删除成功');
                    Load();
                }
                else{
                    alert('删除失败');
                }
            })
        }
    }

    //跳转等级修改页面
    const EditRank=(Rid:number)=>{
         //通过路由实现跳转
          router.push({
            name:"EditMemberRank",
            params:{
                id:Rid
            }
          });
    }

    //分页 方法
    const PageLoadInfo=(choose:string)=>{
        switch(choose)
        {
            case "F":
            pageInfo.value.pageIndex=1;
            break;

            case "E":
            pageInfo.value.pageIndex=pageInfo.value.pageCount;
            break;

            case "S":
                //当前页索引大于1 才可以点击上一页
                if(pageInfo.value.pageIndex>1)
                {
                    pageInfo.value.pageIndex=pageInfo.value.pageIndex-1;
                }
                else{
                    alert('已经是第一页了');
                }
            break;

            case "X":
                if(pageInfo.value.pageIndex< pageInfo.value.pageCount)
                {
                    pageInfo.value.pageIndex=pageInfo.value.pageIndex+1;
                }
                else
                {
                    alert('已经为最后一页啦');
                }
            break;

        }
        Load();
    }

    //更改页容量
    const ChangeSize=()=>{
        //获取当前选中的数据
        pageInfo.value.pageSize=newSize.value;
        Load();
    }


</script>
